// 存放boss和genius列表组件
import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { List, NavBar } from 'antd-mobile';
import styles from './index.css';

const { Item } = List;
const { Brief } = Item;

class MemberList extends Component {
  componentDidMount() {
    const { dispatch, userInfo: { type } } = this.props;
    dispatch({
      type: 'user/getMemberList',
      payload: {
        type,
      }
    })
  }
  goChat (toUserId) {
    // 跳转到聊天页面
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ pathname: '/chat/msg', search: `?toUserId=${toUserId}` }));
  }
  renderPositionDesc (positionDesc = '') {
    if (positionDesc) return positionDesc.split('\n').map((desc, index) => <p style={{ margin: 0 }} key={String(index)}>{desc}</p>);
    return '暂无职位描述';
  }
  render () {
    const { memberList } = this.props;
    return (
      <div className={styles.memberList}>
        <NavBar mode="dark">成员列表</NavBar>
        {
          memberList.map(member => {
            return (
              <List key={member._id}>
                <Item
                  extra={<span className={styles.extraTel}>{member.telephone}</span>}
                  align="top"
                  thumb={<img
                    style={{ width: 40, height: 40 }}
                    src={member.avatar}
                    alt="avatar img"
                  />}
                  multipleLine
                  onClick={this.goChat.bind(this, member._id)}
                >
                  { member.position || '暂无职位' }
                  <Brief>{ this.renderPositionDesc(member.positionDesc) }</Brief>
                </Item>
              </List>
            )
          })
        }
      </div>
    )
  }
}
function mapStateToProps ({ user }) {
  const { userInfo, memberList } = user;
  return { userInfo, memberList };
}
export default connect(mapStateToProps)(MemberList);
